<template>
  <div class="view-content">
    <home-title title="检查站战果统计">
      <Echarts :options="compoundBarOptions" />
    </home-title>
  </div>
</template>

<script lang="ts" setup>
import { getJczCompoundBarOptions } from '@/components/Echarts/options'
import { ref, onMounted } from 'vue'
const compoundBarOptions = ref<object>()
const init = () => {
  compoundBarOptions.value = getJczCompoundBarOptions({
    legend: {
      data: ['重点人员', '重点车辆', '违禁品']
    },
    series: [
      { type: 'bar', barMaxWidth: 10, stack: 'total', name: '重点人员' },
      { type: 'bar', barMaxWidth: 10, stack: 'total', name: '重点车辆' },
      { type: 'bar', barMaxWidth: 10, stack: 'total', name: '违禁品' }
    ],
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#317DF0'
          },
          {
            offset: 1,
            color: '#36D1EE'
          }
        ]
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#47F1C0'
          },
          {
            offset: 1,
            color: '#36DBDF'
          }
        ]
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#BCBD5F'
          },
          {
            offset: 1,
            color: '#ECF157'
          }
        ]
      }
    ],
    dataset: {
      source: [
        ['1月', 1330, 666, 560],
        ['2月', 820, 760, 660],
        ['3月', 1290, 1230, 780],
        ['4月', 832, 450, 890],
        ['5月', 1330, 666, 560],
        ['6月', 820, 760, 660]
      ]
    }
  })
}

onMounted(() => {
  init()
})
</script>

<script lang="ts">
export default {
  name: 'JczZgxx'
}
</script>

<style lang="scss" scoped></style>
